<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约会活动列表 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background-color: #f5f7fa;
            color: #2d3748;
        }
        
        /* 导航栏 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #e53e3e;
        }
        
        /* 页面标题 */
        .page-title {
            font-weight: 800;
            margin-bottom: 0.5rem;
            color: #1a202c;
        }
        
        .page-description {
            color: #718096;
            max-width: 700px;
        }
        
        /* 分类导航 */
        .category-nav {
            overflow-x: auto;
            padding: 0.5rem 0;
            margin-bottom: 1.5rem;
        }
        
        .category-nav::-webkit-scrollbar {
            height: 6px;
        }
        
        .category-nav::-webkit-scrollbar-thumb {
            background-color: #cbd5e0;
            border-radius: 3px;
        }
        
        .category-list {
            display: flex;
            gap: 0.75rem;
            min-width: max-content;
        }
        
        .category-item {
            padding: 0.5rem 1.25rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            background-color: white;
            border: 1px solid #e2e8f0;
            color: #718096;
            white-space: nowrap;
        }
        
        .category-item.active {
            background-color: #e53e3e;
            color: white;
            border-color: #e53e3e;
        }
        
        /* 筛选栏 */
        .filter-bar {
            background-color: white;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .sort-select {
            border-color: #e2e8f0;
            border-radius: 6px;
            padding: 0.375rem 0.75rem;
        }
        
        /* 卡片基础样式 */
        .dating-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .dating-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        }
        
        /* 图片容器 */
        .img-container {
            position: relative;
            overflow: hidden;
        }
        
        .img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .dating-card:hover .img-container img {
            transform: scale(1.05);
        }
        
        /* 多图布局 */
        .img-grid {
            display: grid;
            gap: 2px;
            height: 100%;
        }
        
        .img-1 { grid-template-columns: 1fr; }
        .img-2 { grid-template-columns: 1fr 1fr; }
        .img-3 { 
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        .img-3 img:first-child {
            grid-column: 1;
            grid-row: 1 / 3;
        }
        .img-4 { 
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
        }
        
        /* 无图片状态 */
        .no-img {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #f7fafc;
            color: #a0aec0;
            text-align: center;
            padding: 1.5rem;
        }
        
        .no-img i {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            color: #feb2b2;
        }
        
        /* 标签样式 */
        .date-tag {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: #e53e3e;
            color: white;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .category-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .badge-food { background-color: #fff3cd; color: #856404; }
        .badge-movie { background-color: #d1ecf1; color: #0c5460; }
        .badge-sport { background-color: #d4edda; color: #155724; }
        .badge-art { background-color: #f8d7da; color: #721c24; }
        .badge-travel { background-color: #e0cffc; color: #5a2ca0; }
        
        /* 卡片内容 */
        .card-body {
            padding: 1rem;
        }
        
        .card-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            color: #1a202c;
            transition: color 0.3s;
        }
        
        .dating-card:hover .card-title {
            color: #e53e3e;
        }
        
        .card-text {
            color: #718096;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #edf2f7;
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 8px;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.9rem;
            margin: 0;
        }
        
        .author-location {
            font-size: 0.8rem;
            color: #a0aec0;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 统计和操作 */
        .card-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: #718096;
        }
        
        .stats {
            display: flex;
            gap: 1rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .actions {
            display: flex;
            gap: 0.75rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #718096;
            cursor: pointer;
            transition: color 0.2s;
            padding: 2px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .action-btn:hover {
            color: #e53e3e;
        }
        
        .action-btn.liked {
            color: #e53e3e;
        }
        
        .action-btn.saved {
            color: #ed8936;
        }
        
        /* 特殊布局 */
        .featured-card {
            display: flex;
        }
        
        .featured-img {
            width: 40%;
        }
        
        .featured-content {
            width: 60%;
            display: flex;
            flex-direction: column;
        }
        
        .featured-content .card-text {
            -webkit-line-clamp: 3;
            margin-bottom: auto;
        }
        
        .horizontal-card {
            display: flex;
        }
        
        .horizontal-img {
            width: 30%;
        }
        
        .horizontal-content {
            width: 70%;
        }
        
        .masonry-card {
            margin-bottom: 1.5rem;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .featured-card {
                flex-direction: column;
            }
            
            .featured-img, .featured-content {
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .horizontal-card {
                flex-direction: column;
            }
            
            .horizontal-img, .horizontal-content {
                width: 100%;
            }
            
            .card-stats {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            
            .actions {
                width: 100%;
                justify-content: flex-end;
            }
        }
        
        @media (max-width: 576px) {
            .stats {
                width: 100%;
                flex-wrap: wrap;
            }
        }
        
        /* 动画效果 */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo d-flex align-items-center gap-2">
                <i class="fas fa-heart"></i>
                <span>心动约会</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto gap-4">
                    <li class="nav-item">
                        <a href="#" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active fw-medium">约会列表</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">附近活动</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">消息</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-danger">
                            <i class="fas fa-plus me-1"></i> 发起约会
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="mb-5">
            <h1 class="page-title">探索约会活动</h1>
            <p class="page-description">发现身边有趣的约会活动，结识志同道合的朋友，一起创造美好回忆</p>
        </div>
        
        <!-- 分类导航 -->
        <div class="category-nav">
            <div class="category-list">
                <div class="category-item active">全部活动</div>
                <div class="category-item">美食聚餐</div>
                <div class="category-item">电影观影</div>
                <div class="category-item">户外运动</div>
                <div class="category-item">文化艺术</div>
                <div class="category-item">旅行探险</div>
                <div class="category-item">音乐演出</div>
                <div class="category-item">学习交流</div>
            </div>
        </div>
        
        <!-- 筛选栏 -->
        <div class="filter-bar d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div class="d-flex align-items-center gap-2">
                <span class="text-muted">排序方式:</span>
                <select class="sort-select">
                    <option value="recommend">推荐优先</option>
                    <option value="newest">最新发布</option>
                    <option value="hot">热门程度</option>
                    <option value="distance">距离最近</option>
                </select>
            </div>
            
            <div class="d-flex align-items-center gap-2">
                <span class="text-muted">筛选:</span>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="free">
                    <label class="form-check-label" for="free">免费活动</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="thisWeek">
                    <label class="form-check-label" for="thisWeek">本周活动</label>
                </div>
            </div>
        </div>
        
        <!-- 精选约会 -->
        <div class="mb-6">
            <h2 class="h4 mb-3">精选推荐</h2>
            
            <!-- 精选卡片 - 3张图片 -->
            <div class="dating-card featured-card reveal">
                <div class="img-container featured-img" style="min-height: 280px;">
                    <div class="img-grid img-3">
                        <img src="https://picsum.photos/800/1000?random=10" alt="秋季露营风景">
                        <img src="https://picsum.photos/400/400?random=11" alt="露营美食">
                        <img src="https://picsum.photos/400/400?random=12" alt="篝火晚会">
                    </div>
                    <div class="date-tag">10月22-23日</div>
                </div>
                
                <div class="card-body featured-content">
                    <span class="category-badge badge-travel">旅行探险</span>
                    <h3 class="card-title">秋季星空露营，一起看银河和日出</h3>
                    
                    <p class="card-text">
                        周末组织一次秋季露营活动，地点在距离市区约2小时车程的星空营地。我们将在周六上午出发，周日下午返回。活动包括徒步、野餐、篝火晚会和星空观测。营地设施完善，提供帐篷租赁服务。适合喜欢大自然、想远离城市喧嚣的朋友。我会准备天文望远镜和一些户外游戏，期待与有趣的灵魂相遇。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=201" alt="张伟的头像" class="author-avatar">
                        <div>
                            <p class="author-name">张伟</p>
                            <div class="author-location">
                                <i class="fas fa-map-marker-alt fa-sm"></i>
                                <span>星光露营地</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card-stats">
                        <div class="stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>5.2k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>156</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>23</span>
                            </div>
                        </div>
                        <div class="actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>328</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 网格布局区域 -->
        <div class="mb-6">
            <h2 class="h4 mb-3">热门活动</h2>
            
            <div class="row">
                <!-- 标准卡片 - 1张图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="dating-card reveal">
                        <div class="img-container" style="height: 200px;">
                            <img src="https://picsum.photos/600/400?random=20" alt="新开的日式料理店">
                            <div class="date-tag">今晚7点</div>
                        </div>
                        
                        <div class="card-body">
                            <span class="category-badge badge-food">美食聚餐</span>
                            <h3 class="card-title">新开日式料理店试吃，寻找美食爱好者</h3>
                            
                            <p class="card-text">
                                市中心新开了一家日式料理店，主厨是从东京来的，想找位喜欢日料的朋友一起去尝尝。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=202" alt="李娜的头像" class="author-avatar">
                                <div>
                                    <p class="author-name">李娜</p>
                                    <div class="author-location">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>樱花日料</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-stats">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>1.8k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>42</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>87</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 标准卡片 - 无图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="dating-card reveal">
                        <div class="img-container" style="height: 200px;">
                            <div class="no-img">
                                <i class="fas fa-film"></i>
                                <div>电影之夜</div>
                            </div>
                            <div class="date-tag">周六下午</div>
                        </div>
                        
                        <div class="card-body">
                            <span class="category-badge badge-movie">电影观影</span>
                            <h3 class="card-title">经典科幻电影马拉松，重温星际穿越</h3>
                            
                            <p class="card-text">
                                私人影院包场，放映诺兰经典科幻电影，提供零食饮料，适合喜欢深度电影的朋友。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=203" alt="王浩的头像" class="author-avatar">
                                <div>
                                    <p class="author-name">王浩</p>
                                    <div class="author-location">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>光影私人影院</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-stats">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>1.2k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>28</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>64</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 标准卡片 - 2张图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="dating-card reveal">
                        <div class="img-container" style="height: 200px;">
                            <div class="img-grid img-2">
                                <img src="https://picsum.photos/300/400?random=30" alt="城市骑行路线">
                                <img src="https://picsum.photos/300/400?random=31" alt="骑行休息区">
                            </div>
                            <div class="date-tag">周日上午</div>
                        </div>
                        
                        <div class="card-body">
                            <span class="category-badge badge-sport">户外运动</span>
                            <h3 class="card-title">城市骑行探索，发现隐藏的美景</h3>
                            
                            <p class="card-text">
                                轻松的城市骑行活动，全程约20公里，路线经过多个公园和景点，适合休闲骑行。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=204" alt="刘强的头像" class="author-avatar">
                                <div>
                                    <p class="author-name">刘强</p>
                                    <div class="author-location">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>城市绿道</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-stats">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>956</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>19</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>42</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 水平卡片 - 4张图片 -->
                <div class="col-12">
                    <div class="dating-card horizontal-card reveal">
                        <div class="img-container horizontal-img" style="height: 220px;">
                            <div class="img-grid img-4">
                                <img src="https://picsum.photos/400/400?random=40" alt="艺术展作品1">
                                <img src="https://picsum.photos/400/400?random=41" alt="艺术展作品2">
                                <img src="https://picsum.photos/400/400?random=42" alt="艺术展作品3">
                                <img src="https://picsum.photos/400/400?random=43" alt="艺术展现场">
                            </div>
                            <div class="date-tag">10月25日起</div>
                        </div>
                        
                        <div class="card-body horizontal-content">
                            <span class="category-badge badge-art">文化艺术</span>
                            <h3 class="card-title">当代艺术展预展邀请，与艺术家面对面交流</h3>
                            
                            <p class="card-text">
                                获得了几张当代艺术展的预展门票，展览汇集了国内外知名艺术家的作品。预展当天将有艺术家现场讲解和交流环节，非常难得的机会。希望邀请同样对当代艺术感兴趣的朋友一起参加，结束后可以去附近的美术馆咖啡厅深入讨论。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=205" alt="陈艺的头像" class="author-avatar">
                                <div>
                                    <p class="author-name">陈艺</p>
                                    <div class="author-location">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>当代艺术中心</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-stats">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>3.1k</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>87</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-user"></i>
                                        <span>12</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>215</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-check-circle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 瀑布流风格布局 -->
        <div class="mb-6">
            <h2 class="h4 mb-3">更多活动</h2>
            
            <div class="row">
                <!-- 高卡片 - 1张图片 -->
                <div class="col-md-6 col-lg-3">
                    <div class="dating-card masonry-card reveal" style="height: 100%;">
                        <div class="img-container" style="height: 240px;">
                            <img src="https://picsum.photos/600/800?random=50" alt="瑜伽课程现场">
                            <div class="date-tag">每周二四六</div>
                        </div>
                        
                        <div class="card-body">
                            <span class="category-badge badge-sport">户外运动</span>
                            <h3 class="card-title">晨间瑜伽课程，寻找长期练习伙伴</h3>
                            
                            <p class="card-text">
                                公园晨间瑜伽，专业老师指导，适合各种水平的练习者，结束后可以一起早餐。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=206" alt="林静的头像" class="author-avatar">
                                <div>
                                    <p class="author-name">林静</p>
                                    <div class="author-location">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>中央公园</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-stats">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>786</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-user"></i>
                                        <span>15</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>36</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-check-circle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 中卡片 - 无图片 -->
                <div class="col-md-6 col-lg-3">
                    <div class="dating-card masonry-card reveal">
                        <div class="img-container" style="height: 180px;">
                            <div class="no-img">
                                <i class="fas fa-microphone"></i>
                                <div>脱口秀开放麦</div>
                            </div>
                            <div class="date-tag">周五晚</div>
                        </div>
                        
                        <div class="card-body">
                            <span class="category-badge badge-art">文化艺术</span>
                            <h3 class="card-title">脱口秀开放麦，寻找喜剧爱好者</h3>
                            
                            <p class="card-text">
                                新开的喜剧俱乐部有开放麦活动，想找朋友一起去感受欢乐氛围。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=207" alt="赵阳的头像" class="author-avatar">
                                <div>
                                    <p class="author-name">赵阳</p>
                                    <div class="author-location">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>笑工厂俱乐部</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-stats">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>654</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>18</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>29</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 高卡片 - 3张图片 -->
                <div class="col-md-6 col-lg-3">
                    <div class="dating-card masonry-card reveal" style="height: 100%;">
                        <div class="img-container" style="height: 240px;">
                            <div class="img-grid img-3">
                                <img src="https://picsum.photos/600/1200?random=60" alt="手工皮具制作过程">
                                <img src="https://picsum.photos/300/600?random=61" alt="手工皮具工具">
                                <img src="https://picsum.photos/300/600?random=62" alt="手工皮具成品">
                            </div>
                            <div class="date-tag">10月29日</div>
                        </div>
                        
                        <div class="card-body">
                            <span class="category-badge badge-art">文化艺术</span>
                            <h3 class="card-title">手工皮具制作体验，创造专属小物件</h3>
                            
                            <p class="card-text">
                                专业手工皮具工作室的体验课，制作小钱包或钥匙扣，适合初学者，全程有老师指导。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=208" alt="吴巧的头像" class="author-avatar">
                                <div>
                                    <p class="author-name">吴巧</p>
                                    <div class="author-location">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>匠心工坊</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-stats">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>876</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-user"></i>
                                        <span>8</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>45</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="fas fa-check-circle"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 中卡片 - 2张图片 -->
                <div class="col-md-6 col-lg-3">
                    <div class="dating-card masonry-card reveal">
                        <div class="img-container" style="height: 180px;">
                            <div class="img-grid img-2">
                                <img src="https://picsum.photos/600/600?random=70" alt="读书会现场">
                                <img src="https://picsum.photos/600/600?random=71" alt="书籍展示">
                            </div>
                            <div class="date-tag">周日下午</div>
                        </div>
                        
                        <div class="card-body">
                            <span class="category-badge badge-art">学习交流</span>
                            <h3 class="card-title">心理学书籍读书会，探讨人际关系</h3>
                            
                            <p class="card-text">
                                本月共读《非暴力沟通》，一起讨论如何建立良好的人际关系。
                            </p>
                            
                            <div class="author-info">
                                <img src="https://picsum.photos/200/200?random=209" alt="孙晓的头像" class="author-avatar">
                                <div>
                                    <p class="author-name">孙晓</p>
                                    <div class="author-location">
                                        <i class="fas fa-map-marker-alt fa-sm"></i>
                                        <span>知阅书店</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card-stats">
                                <div class="stats">
                                    <div class="stat-item">
                                        <i class="far fa-eye"></i>
                                        <span>543</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-comment"></i>
                                        <span>23</span>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button class="action-btn">
                                        <i class="far fa-heart"></i>
                                        <span>27</span>
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-bookmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="text-center mb-6">
            <button class="btn btn-outline-danger px-5 py-2 rounded-pill" id="loadMore">
                <i class="fas fa-redo me-2"></i>加载更多活动
            </button>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white py-4 border-top">
        <div class="container text-center">
            <div class="mb-3">
                <a href="#" class="text-muted me-3"><i class="fab fa-weibo"></i></a>
                <a href="#" class="text-muted me-3"><i class="fab fa-wechat"></i></a>
                <a href="#" class="text-muted"><i class="fab fa-instagram"></i></a>
            </div>
            <p class="text-muted mb-0">© 2023 心动约会 - 让每次相遇都充满惊喜</p>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 滚动显示动画
            const revealElements = document.querySelectorAll('.reveal');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.style.opacity = '1';
                            entry.target.style.transform = 'translateY(0)';
                        }, index * 100);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            revealElements.forEach(el => observer.observe(el));
            
            // 分类切换
            const categoryItems = document.querySelectorAll('.category-item');
            categoryItems.forEach(item => {
                item.addEventListener('click', function() {
                    categoryItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                    // 实际项目中添加筛选逻辑
                });
            });
            
            // 点赞功能
            const likeButtons = document.querySelectorAll('.action-btn');
            likeButtons.forEach(btn => {
                if (btn.querySelector('.fa-heart')) {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const icon = this.querySelector('i');
                        const countSpan = this.querySelector('span');
                        
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.classList.add('liked');
                            countSpan.textContent = (parseInt(countSpan.textContent) + 1).toString();
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.classList.remove('liked');
                            countSpan.textContent = (parseInt(countSpan.textContent) - 1).toString();
                        }
                    });
                }
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.action-btn');
            saveButtons.forEach(btn => {
                if (btn.querySelector('.fa-bookmark')) {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const icon = this.querySelector('i');
                        
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.classList.add('saved');
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.classList.remove('saved');
                        }
                    });
                }
            });
            
            // 报名功能
            const joinButtons = document.querySelectorAll('.action-btn');
            joinButtons.forEach(btn => {
                if (btn.querySelector('.fa-check-circle')) {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const card = this.closest('.dating-card');
                        const title = card.querySelector('.card-title').textContent;
                        
                        if (confirm(`确定要报名参加"${title}"吗？`)) {
                            this.innerHTML = '<i class="fas fa-check"></i>';
                            this.title = "已报名";
                            this.disabled = true;
                            this.style.color = '#28a745';
                            
                            // 更新报名人数
                            const userStat = card.querySelector('.stat-item:last-child span');
                            if (userStat) {
                                let count = parseInt(userStat.textContent);
                                userStat.textContent = (count + 1).toString();
                            }
                        }
                    });
                }
            });
            
            // 卡片点击事件
            const datingCards = document.querySelectorAll('.dating-card');
            datingCards.forEach(card => {
                card.addEventListener('click', function() {
                    const title = this.querySelector('.card-title').textContent;
                    alert(`查看"${title}"的详细信息`);
                    // 实际应用中可以跳转到详情页
                });
            });
            
            // 加载更多按钮
            document.getElementById('loadMore').addEventListener('click', function() {
                const btn = this;
                const icon = btn.querySelector('i');
                
                // 显示加载状态
                icon.classList.add('fa-spin');
                btn.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    icon.classList.remove('fa-spin');
                    btn.disabled = false;
                    alert('已加载全部活动');
                }, 1500);
            });
            
            // 排序和筛选功能
            const sortSelect = document.querySelector('.sort-select');
            sortSelect.addEventListener('change', function() {
                console.log('排序方式变更为: ' + this.value);
                // 实际项目中添加排序逻辑
            });
            
            const filterChecks = document.querySelectorAll('.filter-bar .form-check-input');
            filterChecks.forEach(check => {
                check.addEventListener('change', function() {
                    console.log('筛选条件变更: ' + this.id + ' = ' + this.checked);
                    // 实际项目中添加筛选逻辑
                });
            });
        });
    </script>
</body>
</html>


